繼昨天color，今天我們從display講起。

Display

我們可以使用.display-*(*為 block, inline-block, inline, none, table, table-cell, table-row, flex, inline-flex, grid, inline-grid) 改變物件display屬性。
另外，.display-*屬性支持響應式，很常用在某斷點時隱藏某物。
例如:.d-none .d-md-block就是在瀏覽器md以下隱藏，以上顯現；如果是.d-lg-none就是瀏覽器lg以上隱藏。
P.S. .d-none與.invisible不同，.invisible與 .d-none不一樣， .invisible雖然隱藏但占空間，.d-none不占空間。

Float

float可以使物件向左或向右浮動排版，但現在我們比較常用flex，因為使用float排版還要額外加上clearfix。
有:.float-start(向左浮動), .float-end(向右浮動), .float-none(不浮動)
P.S. 使用float屬性時外層容器要加上.clearfix，不然外層會塌陷。
官方文件 helper 的 clearfix
此CodePen的外層容器是塌陷的，請試著為外層加上.clearfix，讓內層物件可以撐開它。
此外，Float屬性也支持響應式，寫法是:.float-斷點-*。

Interactions

bootstrap 的 Interactions屬性可以指定使用者與內容的互動方式。

Text selection (文字選取模式)

例如:
.user-select-all為使用者點擊該段落，整個段落就會被選取反白。
.user-select-auto是正常預設選取模式。
.user-select-none的話不會讓使用者選取。(我有看過一些網站是這樣的)

Pointer events (滑鼠點擊事件) (常用在link)

使用 .pe-none(不給點擊)，或是pe-auto(可以點擊)的方式改變滑鼠點擊事件。
範例程式碼:

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

效果如圖:

效果分別是:第一個連結可以點，第二個不能點。
第三個連結繼承外層的p段落設定.pe-none，不能點。
第四個連結雖然外層的p段落設定.pe-none，但是內層連結設.pe-auto，所以第四個連結可以點。

Colored links

跟.text-*不一樣的是，colored links屬性會對:hover, :focus起作用。
寫法是:.link-*(* 為情境色)，例如.link-primary。
P.S.如果不要link的下底線可以用text類別的.text-decoration-none移除下底線。